<script type="text/javascript">
$(document).ready(function () {

	_dateFormat = 'yy-mm-dd';
    _lastDate = null;
	
    $('#button-setup-time').click(function (e) {
        
        e.preventDefault();
        
        $('#modal-dialog').modal({
            zIndex: 4,
            onShow: function() {
                $("#default_date").val($.datepicker.formatDate(_dateFormat, _lastDate ? _lastDate : new Date()));
                $("#default_date").datepicker({dateFormat: _dateFormat});
                $("#button-modal-go").click(function() {
                    startDate = $("#default_date").datepicker('getDate');
                    signupDate = new Date(startDate);
                    signupDate.setDate(signupDate.getDate() - 1);
                    
                    $("#start_time").val($.datepicker.formatDate(_dateFormat, startDate) + ' 20:00:00');
                    $("#end_time").val($.datepicker.formatDate(_dateFormat, startDate) + ' 23:00:00');
                    $("#signup_deadline").val($.datepicker.formatDate(_dateFormat, signupDate) + ' 20:00:00');

                    _lastDate = startDate;
                    
                    $.modal.close();
                });
                $("#button-modal-cancel").click(function() {
                    $.modal.close();
                });
                $("#button-modal-go").focus();
            },
            onClose: function() {
                $("#default_date").datepicker('destroy');
                $.modal.close();
            }
        });
    });
});
</script>

<div id="modal-dialog" class="simple-modal-container">
    <div class="simple-modal-content">
        <center>
            <h3>Setup Time</h3>
            <p>
                Use this dialog to setup the default time a raid on a specific day.<br/>
                <em>Pressing Go will clear the values already in the form!</em>
            </p>
            <form>
            <div class="input-large">
                <input id="default_date"/>
            </div>
            <br/><br/>
            <div class="button-large">
                <button id="button-modal-go">Go</button>
            </div>
            <div class="button-large">
                <button id="button-modal-cancel">Cancel</button>
            </div>
            </form>
        </center>
    </div>
</div>

<div class="content-left content-double">
    <h1>Create Raid</h1>
    <div class="frame-metal">
        <div class="frame-content">
            <?= $this->form ?>
        </div>
    </div>
</div>

<div class="content-right content-half">
    <h1>&nbsp;</h1>
    <div class="frame-input">
        <div class="frame-content">
            <div class="button-large">
                <button id="button-setup-time">Setup time</button>
            </div>
            <br/>
            <br/>
            <div class="button-small">
                <?= $this->link('Back', array('action'=>'index')); ?>
            </div>
        </div>
    </div>
</div>
